<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/main.css">
	
	<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
	<style media="" data-href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style>
<style>
      /* NOTE:  Prefixfree 需要从inline中提取css。如果演示是在client-side*/
.container {
  margin: 120px auto;
  width: 400px;
  height: 200px;
  position: relative;
  perspective: 1000px;
  z-index: -1;
  
}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 400px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
}

.a {
  transform: rotateY(0deg) translateZ(400px);
  background: url(images/carousel-1.jpg);
}
.b {
  transform: rotateY(60deg) translateZ(400px);
  background: url(images/carousel-2.jpg);
}
.c {
  transform: rotateY(120deg) translateZ(400px);
  background: url(images/carousel-3.jpg);
}
.d {
  transform: rotateY(180deg) translateZ(400px);
  background: url(images/carousel-4.jpg);
}
.e {
  transform: rotateY(240deg) translateZ(400px);
  background: url(images/carousel-5.jpg);
} 
.f {
  transform: rotateY(300deg) translateZ(400px);
  background: url(images/carousel-6.jpg);
}

.next, .prev {
  color: #f44355;
  position: absolute;
  top: 200px;
  padding: 1em 2em;
  
/*  box-shadow: 0 5px 0 #999;*/
/*  transition: box-shadow 0.1s, top 0.1s;*/
}
.next:hover, .prev:hover { 
	color: #252525; 
	cursor: pointer;
    background: #f2f2f2;
    border-radius: 5px;
    border-top: 1px solid #FFF;
	}
.next:active, .prev:active {
/*
  top: 104px;
  box-shadow: 0 1px 0 #999; 
*/
}
.next { right: 5em; }
.prev { left: 5em; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/main-main.css">

</head>
<body>
<header>
	<nav>
		<div>
			<a>首页</a>
			<div>
				<a>Link 1</a>
				<a>Link 2</a>
				<a>Link 3</a>
				<a>Link 4</a>
				<a>Link 5</a>
				<a>Link 6</a>
			</div>
		</div>
		<div>
			<a>游戏</a>
			<div>
				<a>Link 1</a>
				<a>Link 2</a>
				<a>Link 3</a>
				<a>Link 4</a>
				<a>Link 5</a>
				<a>Link 6</a>
			</div>
		</div>
		<div>
			<a>周边</a>
			<div>
				<a>Link 1</a>
				<a>Link 2</a>
				<a>Link 3</a>
				<a>Link 4</a>
				<a>Link 5</a>
				<a>Link 6</a>
			</div>
		</div>
		<div>
			<a>个人</a>
			<div>
				<a>Link 1</a>
				<a>Link 2</a>
				<a>Link 3</a>
				<a>Link 4</a>
				<a>Link 5</a>
				<a>Link 6</a>
			</div>
		</div>
		<div>
			<a>资讯</a>
		</div>
		<div>
			<a>&#65516;</a>
			<div>
				<a href="login.html">登录</a>
				<a href="register.html">注册</a>
				<a href="shoppingbox.html">购物车</a>
				<a href="#">收藏</a>
			</div>
		</div>		
	</nav>
</header>

<div class="container">
  <picture class="carousel">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>
    <div class="item d"></div>
    <div class="item e"></div>
    <div class="item f"></div>
  </picture>
</div>
<div class="next">&gt;</div>
<div class="prev">&lt;</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/main-carousel.js"></script>

<main>
	<h1>推荐游戏</h1>
  <p>
    XCOM 2 is the sequel to the award-winning strategy game, XCOM: Enemy Unknown. Twenty years have passed since humanity lost the war against the alien invaders and a new world order now exists on Earth. After years of lurking in the shadows, XCOM forces must rise and eliminate the alien occupation. 
  </p>

  <div class="row">
    <div class="row__inner">

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-1.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-2.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
         <img class="tile__img" src="images/Game.jpg" alt=""  />
        </div>
        <a href="index.html"><div class="tile__details">
          <div class="tile__title">
            试玩
          </div>
        </div></a>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/bg-clear.jpg" alt=""  />
        </div>
        <a href="product.html"><div class="tile__details">
          <div class="tile__title">
            FOR HONOR
          </div>
        </div></a>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-5.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-6.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-7.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-8.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-9.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-10.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/carousel-1.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/carousel-2.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/carousel-3.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/carousel-4.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/carousel-5.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/carousel-6.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-1.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-2.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="images/presentation-3.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

    </div>
  </div>
</main> 
<script src="js/main-main.js"></script>
<!--
<footer>
	<p>©2017 Valve Corporation。保留所有权利。</p>
</footer>
-->
</body>
</html>